/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20231105
* @version:0.2.1
* @type:interface
* @description:
* # SFile
* SFile can help users present file selectors GUI
* ## properties inherits SCard
* - in property <TextHorizontalAlignment> text-alignment : file item horizontal alignment
* - in property <[SOption]> tabs : file tabs
* - in-out property <[length]> column-width : file item column width
* - in-out property <[FileItem]> files : file item font files
* - in-out property <string> item-font-family : file item font family
* - in-out property <int> item-font-weight : file item font weight
* - in-out property <length> item-font-size: file item font size
* - in-out property <bool> item-font-italic : file item font italic
* - in-out property <PaddingType> item-padding-type: file item padding type
* ## functions
* - pure function get-column-width(w:length,index:int)->length : get file item column width
* ## callbacks
* - callback tab-clicked(int,SOption) : run if you click the tab
* - callback item-clicked(int,int,FileItem) : run if you click a file item
* ============================================
*/
import { SCard } from "../card/index.slint";
import { ROOT_STYLES,DefaultSFileProps } from "../../themes/index.slint";
import { SText } from "../text/index.slint";
import { SIcon } from "../icon/index.slint";
import { ScrollView , ListView} from "std-widgets.slint";
import { Themes,PaddingType,UseSurrealismFn,UseIcons,FileItem,SOption,ShadowType,BorderType } from "../../use/index.slint";


export component File inherits SCard{
  width: 100%;
  height: 100%;
  font-family : DefaultSFileProps.font-family;
  font-weight : DefaultSFileProps.font-weight;
  font-size: DefaultSFileProps.font-size;
  font-color : DefaultSFileProps.font-color;
  font-italic : DefaultSFileProps.font-italic;
  padding-type: DefaultSFileProps.padding-type;
  shadow-type: DefaultSFileProps.shadow-type;
  border-type : DefaultSFileProps.border-type;
  in property <TextHorizontalAlignment> text-alignment : DefaultSFileProps.text-alignment;
  in property <[SOption]> tabs : DefaultSFileProps.tabs;
  in-out property <[length]> column-width : DefaultSFileProps.column-width;
  in-out property <[FileItem]> files : DefaultSFileProps.files;
  in-out property <string> item-font-family : DefaultSFileProps.item-font-family;
  in-out property <int> item-font-weight : DefaultSFileProps.item-font-weight;
  in-out property <length> item-font-size: DefaultSFileProps.item-font-size;
  in-out property <bool> item-font-italic : DefaultSFileProps.item-font-italic;
  in-out property <PaddingType> item-padding-type:DefaultSFileProps.item-padding-type;
  callback tab-clicked(int,SOption);
  callback item-clicked(int,int,FileItem);
  pure function get-column-width(w:length,index:int)->length {
    root.column-width.length==0?w/4:column-width[index]
  }
  VerticalLayout {
    HorizontalLayout {
      for t-item[t-index] in tabs: SCard{
        border-type: BorderType.None;
        drop-shadow-blur: 0;
        drop-shadow-offset-x: 0;
        drop-shadow-offset-y: 0;
        card-height: root.font-size;
        width: get-column-width(parent.width,t-index);
        padding-type: root.padding-type;
        theme: root.theme;
        HorizontalLayout {
          padding-left: parent.card-padding.padding-left;
          padding-right: parent.card-padding.padding-right;
          TouchArea {
            mouse-cursor: pointer;
            clicked => {
              root.tab-clicked(t-index,t-item);
            }
            SText {
              width: parent.width;
              height: parent.height;
              text: t-item.label;
              horizontal-alignment: root.text-alignment;
              theme: root.theme;
              font-family: root.font-family;
              font-weight: root.font-weight;
              font-size: root.font-size;
              font-italic: root.font-italic;
              wrap: no-wrap;
            }
          }
        }
      } 
    }
    // 滚动列表 ， 通过双层循环从横列转纵列
    scroll-view:=ScrollView {
      viewport-height: files.length * (item-font-size + (UseSurrealismFn.get-padding(item-padding-type).padding-top * 2));
      HorizontalLayout {
        width: parent.width;
        for t-item[t-index] in tabs: SCard{
          border-type: BorderType.None;
          drop-shadow-blur: 0;
          drop-shadow-offset-x: 0;
          drop-shadow-offset-y: 0;
          width: get-column-width(parent.width,t-index);
          padding-type: item-padding-type;
          theme: root.theme;
          height: 100%;
          VerticalLayout {
            padding-left: parent.card-padding.padding-left;
            padding-right: parent.card-padding.padding-right;
            height: parent.height;
            for f-item[f-index] in files: TouchArea {
              z: 100;
              mouse-cursor: pointer;
              clicked => {
                root.item-clicked(f-index,t-index,f-item);
              }
              VerticalLayout{
                if t-index==0: HorizontalLayout {
                  // height: item-configs.height + (UseSurrealismFn.get-padding(item-configs.padding-type).padding-top * 2);
                  spacing: 6px;
                  Rectangle {
                    width: f-icon.width;
                    f-icon:=SIcon {
                      colorize: self.get-colorize();
                      height: item-font-size;
                      width: item-font-size;
                      theme: root.theme;
                      source: f-item.icon;
                    }
                  }
                  SText {
                    theme: root.theme;
                    horizontal-alignment: left;
                    text: f-item.name;
                    font-size: item-font-size;
                    font-weight: item-font-weight;
                    font-italic: item-font-italic;
                    font-family: item-font-family;
                  }
                }
                if t-index==1: SText{
                  theme: root.theme;
                  horizontal-alignment: root.text-alignment;
                  text: f-item.datetime;
                  font-size: item-font-size;
                  font-weight: item-font-weight;
                  font-italic: item-font-italic;
                  font-family: item-font-family;
                }
                if t-index == 2: SText{
                  theme: root.theme;
                  horizontal-alignment: root.text-alignment;
                  text: f-item.file-type;
                  font-size: item-font-size;
                  font-weight: item-font-weight;
                  font-italic: item-font-italic;
                  font-family: item-font-family;
                }
                if t-index == 3: SText{
                  theme: root.theme;
                  horizontal-alignment: root.text-alignment;
                  text: f-item.size;
                  font-size: item-font-size;
                  font-weight: item-font-weight;
                  font-italic: item-font-italic;
                  font-family: item-font-family;
                }
              }
            }
          }
        }
      }
    }
  } 
}
